<script setup>
import { ref, onMounted, watchEffect } from 'vue'

import { useRouter, useRoute } from 'vue-router'


// 激活的图标 0 - 1 - 2
const isActived = ref(0)

const router = useRouter()
// 根据激活状态跳转路由
const changeActived = (num) => {
  isActived.value = num
  if (num === 0) {
    router.push('/home')
  } else if (num === 1) {
    router.push('/history')
  } else {
    router.push('/user')
  }
}

// 是否展示tarbar
const isShow = ref(true)
const route = useRoute()

const try2ChangeStatus = () => {
  if (route.path === "/edit") {
    isShow.value = false
  } else if (route.path === "/setting"){
    isShow.value = false
  } else {
    isShow.value = true
  }
  // 防止通过url访问时, tarbar显示的图标不对
  if (route.path === "/user"){
    isActived.value = 2
  } else if (route.path === "/history") {
    isActived.value = 1
  } else {
    isActived.value = 0
  }
}

watchEffect(() => {
  try2ChangeStatus()
})

</script>

<template>
  <div
    v-if="isShow"
    class="bg-white fixed left-0 bottom-0 flex w-screen h-8 items-center justify-around"
  >
    <div
      @click="changeActived(0)"
      class="flex items-center justify-center w-1/3 h-full"
    >
      <img
        v-if="isActived == 0"
        src="../assets/tarbar/booklet-fill.png"
      >
      <img
        v-else
        src="../assets/tarbar/booklet-line.png"
      >
    </div>
    <div
      @click="changeActived(1)"
      class="flex items-center justify-center  w-1/3 h-full"
    >
      <img
        v-if="isActived == 1"
        src="../assets/tarbar/time-fill.png"
      >
      <img
        v-else
        src="../assets/tarbar/time-line.png"
      >
    </div>
    <div
      @click="changeActived(2)"
      class="flex items-center justify-center  w-1/3 h-full"
    >
      <img
        v-if="isActived == 2"
        src="../assets/tarbar/user-fill.png"
      >
      <img
        v-else
        src="../assets/tarbar/user-line.png"
      >
    </div>
  </div>
</template>

<style scoped></style>